<template>
    <view>
       <u-navbar :is-back="true" title="收益明细"  back-text='' >
      <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<!-- <view>
                <image @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </view> -->
			</view>
      </u-navbar>

      <view>
      <view class="totle-price" >
         <view class="totle-price-text" >
          <span  >8月提现：</span><span>¥898979.00</span>
         </view>

         <view   @click="selectTimeM"  :style="{ display:'flex', justifyContent:'center' ,alignItems:'center' ,backgroundColor:'white', borderRadius:'5px',padding:'0.3rem' }" >
         <image :style="{  width:'1rem',height:'1rem' }" src="../../style/image/stati/A33.png" alt="">
         <view :style="{ fontSize:'0.6rem', padding:'0rem 0rem 0rem 0.5rem' }"  >{{selectTime}}</view>
         </view>

      </view>
      </view>


       <view class="notesList" v-for="(item,index) in notesList " :key="index" >

          <view   class="notesList-child" >
              <view class="note-top" >
                    <view style="
font-size: 0.77rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;">
                    {{item.auditStatus==0?'提现中':''}}{{item.auditStatus==1?'提现中':''}}{{item.auditStatus==9?'提现失败':''}}</view>

                    <view style="
font-size: 0.66rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;">{{item.createTime}} 提现
                    </view>
              </view>
              <view class="note-bottom" >
                    <view style="
font-size: 1rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;">￥{{item.auditMoney}}元</view>

                    <view  v-if="item.auditStatus==0" style="
font-size: 0.66rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;">预计2小时内到账</view>

            <view style="
font-size: 0.66rem;
font-family: PingFang SC;
font-weight: 300;
color: #656565;" v-else >{{item.auditTime}}</view>

              </view>
          </view>

       </view>


       <view  style="margin-top:2rem;" >
          <u-empty   v-if="notesList.length==0" text="暂无数据" mode="data"></u-empty>
        </view>




                 <u-popup v-model="popupShow" mode="bottom">

           
              <view>
               <view style="text-align: center;margin: 1rem 0rem 0rem 0rem;" >请选择筛选类型:</view>

               <view class="classesifyP">
                
      <view class="classesify">
        <view :class="selectIfy==1?'classesify-puc':'classesify-pucs' "  @click="pucM" >按月</view>
        <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

        <view class="classesify-buss"  @click="busM" v-if="selectIfy == 2">按日</view>
         <view  class="classesify-bus"  @click="busM" v-else>按日</view>
      </view>
    </view>
            </view>
		</u-popup>

       <u-picker v-model="pickerShow"  @confirm="pickerConfirm"  mode="time"></u-picker>

       <u-select v-model="selectShow" :default-value=[10,10]  mode="mutil-column" :list="list" @confirm="selectConfirm"></u-select>


    </view>
 
</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'

import { findProxyDrawMoneyList ,findProxyDrawMoneySum } from "../../utils/uniApi";


 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
    })


    export default class extends Vue {
 
     @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        }) msg!:string;


          public list= [
					[
            {
							value: '1',
							label: '2010'
						},
            {
							value: '2',
							label: '2011'
						},
            {
							value: '3',
							label: '2012'
						},
            {
							value: '4',
							label: '2013'
						},
            {
							value: '5',
							label: '2014'
						},
            {
							value: '6',
							label: '2015'
						},
            {
							value: '7',
							label: '2016'
						},
             {
							value: '8',
							label: '2017'
						},
             {
							value: '9',
							label: '2018'
						},
             {
							value: '10',
							label: '2019'
						},
             {
							value: '11',
							label: '2020'
						},
             {
							value: '12',
							label: '2021'
						},
					],
					[
						{
							value: '13',
							label: '1'
						},
							{
							value: '14',
							label: '2'
						},
            	{
							value: '15',
							label: '3'
						},
            	{
							value: '16',
							label: '4'
						},
            	{
							value: '17',
							label: '5'
						},
            	{
							value: '18',
							label: '6'
						},
            	{
							value: '19',
							label: '7'
						},
            	{
							value: '20',
							label: '8'
						},
            	{
							value: '21',
							label: '9'
						},
            	{
							value: '22',
							label: '10'
						},
            	{
							value: '23',
							label: '11'
						},
            	{
							value: '24',
							label: '12'
						},
					],
					
				]

       public notesList=[
        // {
        
        // },
        // {
        
        // },
        // {
        
        // }

        ]

  public pageData = 1;

  public selectTime = "请选择日期";
  public repairLists: any = [];

  public selectIfy: any = 0;

   public show = false;

  public popupShow=false
  public pickerShow=false
  public selectShow=false

    public dateType='month' //month 按月查询,day 按天查询

       
         created() {
          }

          mounted() {
              //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
        this.nowDate()


            this.accordingM()

          }

          accordingM(){

           let params={
      userId:uni.getStorageSync("userId") == ""? "" : parseInt(uni.getStorageSync("userId")),
      dateType: this.dateType, //month 按月查询,day 按天查询
      dateTime: this.selectTime, //	时间
      pageNo: this.pageData,
      pageSize: "10",
            }
             

                findProxyDrawMoneyList(params).then((res:any)=>{

                        console.log(res,'jilu记录')

                        this.notesList=res.data.data
                })  

          
          }

          nowDate(){
  
     let datas= new Date()
  function formatDate(datas:any) { 
var myyear = datas.getFullYear(); 
var mymonth = datas.getMonth()+1; 
var myweekday = datas.getDate(); 

if(mymonth < 10){ 
mymonth = "0" + mymonth; 
} 
if(myweekday < 10){ 
myweekday = "0" + myweekday; 
} 
return (myyear+"-"+mymonth + "-" + myweekday); 
} 

    console.log( formatDate(datas),'日期日期日期' )

    this.selectTime=formatDate(datas).split('-')[0]+'-'+formatDate(datas).split('-')[1]

  }



          busM() {
    //方法中获取this
    this.selectIfy = 2;

     this.popupShow=false
     this.pickerShow=true

     setTimeout(()=>{
     
      this.selectIfy = 0;
     },1000)
  }

  pucM() {
    console.log(12312312);
    this.selectIfy = 1; 

      this.popupShow=false
      this.selectShow=true

    setTimeout(()=>{
     
      this.selectIfy = 0;
     },1000)

    
  }


  pickerConfirm(data:any){
    console.log('按日起',data)
     this.selectTime=data.year+'-'+data.month+'-'+data.day

    this.dateType='day'
    this.selectTime=data.year+'-'+data.month+'-'+data.day

    this.accordingM()

     
  }

  selectConfirm(data:any){
      console.log(data)

      let str=(data[0] as any).label+'-'+(data[1] as any).label

       this.dateType='month'
      this.selectTime=str
      this.accordingM()

  }
    selectTimeM() {

    this.popupShow = !this.show;
  }


    }
</script>

<style  lang="scss"  scoped>

.totle-price{
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #f3f5f7;
     padding: 0.2rem 0.5rem;
}
.totle-price-text{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.totle-price-text span{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}

.notesList{
margin: 0.5rem;
/* border-bottom: 1px solid #f2f2f2; */

}
.notesList-child{
padding: 0.5rem;
border-bottom: 1px solid #f2f2f2;

}


.note-top{
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.note-bottom{
 display: flex;
 align-items: center;
 justify-content: space-between;
}



.repairLists {
  background-color: white;
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  /* padding: 1rem; */
  /* margin: 1rem; */
}
.repairLists-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}

.repairLists-child {
  border-bottom: 1px solid #e5e5e5;
}
.repairLists-head {
  padding: 1rem;
}


.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;

   padding: 1rem 1rem 3rem 1rem;
}

.classesify {
  width: 6rem;
  height: 1.8rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
   font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
</style>